<template>
	<div class="kouJibm">
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane :label="message?.irs?.irsName" name="first">
				<!-- 基本信息 -->
				<el-descriptions :column="3" border>
					<el-descriptions-item label="应用名称">{{ message?.irs?.irsName }} </el-descriptions-item>
					<el-descriptions-item label="应用编码">{{ message?.irs?.irsCode }} </el-descriptions-item>
					<el-descriptions-item label="应用类型">{{ dictionary.irsType(message?.irs?.irsType) }} </el-descriptions-item>
					<el-descriptions-item label="开发模式">{{ dictionary.developType(message?.irs?.developType) }} </el-descriptions-item>
					<el-descriptions-item :span="2" label="贯通层级">{{ dictionary.throughLevel(message?.irs?.throughLevel) }} </el-descriptions-item>
					<el-descriptions-item :span="3" label="业务领域">{{ message?.irs?.businessDomain }} </el-descriptions-item>
					<el-descriptions-item label="是否业务协同">{{ dictionary.isYN(message?.irs?.synergy) }} </el-descriptions-item>
					<el-descriptions-item :span="2" v-if="message?.irs?.synergy == 1" label="业务协同结构"
						>{{ dictionary.synergyStructure(message?.irs?.synergyStructure) }}
					</el-descriptions-item>
					<el-descriptions-item :span="3" v-if="message?.irs?.synergy == 1" label="业务协同描述"
						>{{ message?.irs?.synergyDescription }}
					</el-descriptions-item>
					<el-descriptions-item label="用户范围">{{ dictionary.userRange(message?.irs?.userRange) }} </el-descriptions-item>
					<el-descriptions-item label="等保级别">{{ dictionary.protectionLevel(message?.irs?.protectionLevel) }} </el-descriptions-item>
					<el-descriptions-item v-if="['3', '4', '5'].indexOf(message?.irs?.protectionLevel) > 0" label="是否需要密评"
						>{{ dictionary.isYN(message?.irs?.secretReview) }}
					</el-descriptions-item>
					<el-descriptions-item v-if="['3', '4', '5'].indexOf(message?.irs?.protectionLevel) > 0 && message?.irs?.secretReview == 1" label="密评等级"
						>{{ dictionary.secretLevel(message?.irs?.secretLevel) }}
					</el-descriptions-item>
					<el-descriptions-item label="是否需要国产化替代">{{ dictionary.isYN(message?.irs?.domestic) }} </el-descriptions-item>
				</el-descriptions>
				<!-- 云网资源信息 -->
				<cardSme title="云网资源信息" v-if="message?.irs?.cloudType">
					<HyCard title="云资源信息">
						<el-descriptions :column="1" border>
							<el-descriptions-item label="选择云资源类型">{{ dictionary.cloudType(message?.irs?.cloudType) }} </el-descriptions-item>
							<el-descriptions-item v-if="chengOne('3')" label="物理服务器(或集群)">{{ message?.irs?.physics }} </el-descriptions-item>
							<el-descriptions-item v-if="chengOne('3')" label="相关附件(佐证材料)"
								><FilePreview :type="'view'" v-model="message.irs.physicsFiles" />
							</el-descriptions-item>
							<el-descriptions-item v-if="chengOne('4')" label="租赁互联网云资源">{{ message?.irs?.lease }} </el-descriptions-item>
							<el-descriptions-item v-if="chengOne('4')" label="相关附件(佐证材料)"
								><FilePreview :type="'view'" v-model="message.irs.leaseFiles" />
							</el-descriptions-item>
							<el-descriptions-item v-if="chengOne('5')" label="政务私有云">{{ message?.irs?.gov }} </el-descriptions-item>
							<el-descriptions-item v-if="chengOne('5')" label="相关附件(佐证材料)"
								><FilePreview :type="'view'" v-model="message.irs.govFiles" />
							</el-descriptions-item>
						</el-descriptions>
						<!-- <div class="longRever">
							<div class="item_box_w">
								<span class="item_name">选择云资源类型:</span>:
								<span>{{ dictionary.cloudType(message?.irs?.cloudType) }}</span>
							</div>
						</div> -->
					</HyCard>
				</cardSme>
				<!-- 数据、组件、硬件等资源信息 -->
				<cardSme title="数据、组件、硬件等资源信息">
					<div class="data_ying">
						<HyCard title="数据资源信息">
							<el-descriptions :column="1" border>
								<el-descriptions-item label="是否使用公共数据">{{ dictionary.isYN(message?.irs?.usePublic) }} </el-descriptions-item>
								<el-descriptions-item v-if="message?.irs?.usePublic == 1" label="拟使用数据信息表"
									><proTabl :tableData="message?.irs?.useInfo" />
								</el-descriptions-item>
								<el-descriptions-item label="是否产生数据">{{ dictionary.isYN(message?.irs?.produceData) }} </el-descriptions-item>
								<el-descriptions-item v-if="message?.irs?.produceData == 1" label="拟生产数据信息表"
									><proTable :tableData="message?.irs?.produceInfo" />
								</el-descriptions-item>
							</el-descriptions>
						</HyCard>
						<HyCard title="组件资源信息(发布端选择渝快政、渝快办，则必须勾选渝快政、渝快办相关统一类组件)">
							<el-descriptions :column="1" border>
								<el-descriptions-item label="是否使用能力组件">{{ dictionary.isYN(message?.irs?.useComponent) }} </el-descriptions-item>
								<el-descriptions-item v-if="message?.irs?.useComponent == 1" label="组件信息表"
									><subaTabl :tableData="message?.irs?.useComponentInfo" />
								</el-descriptions-item>
								<el-descriptions-item label="是否共享产生组件">{{ dictionary.isYN(message?.irs?.shareComponent) }} </el-descriptions-item>
								<el-descriptions-item v-if="message?.irs?.shareComponent == 1" label="组件信息表"
									><subaTable :tableData="message?.irs?.shareComponentInfo" />
								</el-descriptions-item>
							</el-descriptions>
						</HyCard>
						<HyCard title="硬件资源信息">
							<el-descriptions :column="1" border>
								<el-descriptions-item label="是否设计硬件采购">{{ dictionary.isYN(message?.irs?.hardware) }} </el-descriptions-item>
								<el-descriptions-item v-if="message?.irs?.hardware == 1" label="硬件采购内容">{{ message?.irs?.hardwareType }} </el-descriptions-item>
								<el-descriptions-item label="是否与该应用强相关">{{ dictionary.isYN(message?.irs?.strong) }} </el-descriptions-item>
								<el-descriptions-item v-if="message?.irs?.strong == 1" label="关联性描述">{{ message?.irs?.relevance }} </el-descriptions-item>
							</el-descriptions>
						</HyCard>
					</div>
				</cardSme>
				<!-- 驾驶舱建设 -->
				<cardSme title="驾驶舱建设">
					<HyCard title="驾驶舱建设">
						<el-descriptions :column="1" border>
							<el-descriptions-item label="是否涉及驾驶舱建设">{{ dictionary.isYN(message?.irs?.cockpit) }} </el-descriptions-item>
							<el-descriptions-item v-if="message?.irs?.cockpit == 1" label="预计费用金额(万元)">{{ message?.irs?.budget }} </el-descriptions-item>
						</el-descriptions>
					</HyCard>
				</cardSme>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
import dictionary from '../dictionary.js';
import HyCard from '../Card.vue';
import cardSme from '../cardSme.vue';
import proTabl from './proTabl.vue';
import proTable from './proTable.vue';
import subaTabl from './subaTabl.vue';
import subaTable from './subaTable.vue';
import textImg from './textImg.vue';
import FilePreview from '/@/components/HyUpload/index.vue';
import { toRefs, defineProps, ref } from 'vue';
const props = defineProps({
	message: {
		type: Object,
	},
});
const activeName = ref('first');

const chengOne = (item: any) => {
	let arr = message?.value?.irs?.cloudType || [];
	if (arr.indexOf(item) >= 0) {
		return true;
	} else {
		return false;
	}
};

const { message } = toRefs(props);
</script>

<style lang="scss" scoped>
.kouJibm {
	.longRever {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.item_box {
			width: 30%;
			margin: 5px 0px;
			display: flex;

			.item_name {
				color: #999999;
				width: 130px;
				text-align: right;
				margin-right: 5px;
			}
			.item_content {
				flex: 1;
			}
		}

		.item_box_w {
			width: 100%;
			margin: 5px 0px;
			display: flex;
			// flex-wrap: wrap;

			.item_name {
				color: #999999;
				width: 130px;
				text-align: right;
				margin-right: 5px;
			}
			.item_content {
				flex: 1;
			}

			.table {
				flex: 1;
			}
		}
	}

	.data_ying {
		:deep(.el-card) {
			border: 0px;
		}

		:deep(.el-card:hover) {
			box-shadow: 0 0 0px 0px;
		}
		:deep(.el-card__header) {
			background-color: #ffffff;
		}
	}

	:deep(.el-descriptions__label) {
		width: 13% !important;
	}
}
</style>
